<template>
  <div class="loginBody">
  <div id="app" v-title data-title="飞熊科技-登录"></div>
    <!--        <img src="../../assets/imgs/login.png" alt="">-->
    <div class="logincotent">
      <div class="login">
        <div class="loginC">
          <div class="loginCTitel">
            <div class="loginCTitelFormat">welcome to Fly bear</div>
            <div class="loginCTitelFormat1">欢迎登录飞熊云检查平台</div>
            <div class="loginCTitelFormat2">
              <div class="loginCTitelFormat2C1">
                <div class="TitelFormat2C1Line"></div>
              </div>
              <div class="loginCTitelFormat2C2">账号密码登录</div>
              <div class="loginCTitelFormat2C3">
                <div class="TitelFormat2C1Line"></div>
              </div>
            </div>
          </div>
          <div class="loginInput">
            <el-input class="loginInputPhone" prefix-icon="el-icon-mobile-phone" v-model="phone" placeholder="请输入手机号码"></el-input>
            <el-input class="loginInputPassword" prefix-icon="el-icon-lock" v-model="password" show-password placeholder="请输入密码"></el-input>
            <div class="passwordSet">
              <span class="rememberPaw"><el-checkbox v-model="checkbox_remember_me">记住密码</el-checkbox></span>
              <span class="forgetPaw" @click="$message('请联系系统管理员！')">忘记密码？</span>
            </div>
          </div>

          <div>
            <el-button type="primary" class="loginButton" @click="login">登入</el-button>
          </div>
        </div>
      </div>
      <div class="loginPic"></div>
    </div>
  </div>
</template>

<script>
// import md5 from 'js-md5'
import { getCookie, setCookie } from './cookies.js'
// import userList from './loginForm.js'
import base from '../../api/base.js'
export default {
  data() {
    return {
      phone: '',
      password: '',
      checkbox_remember_me: false,
    }
  },
  methods: {
    // 储存表单信息
    setUserInfo() {
      console.log(this.checkbox_remember_me, 'this.checkbox_remember_me')
      // 判断用户是否勾选记住密码，如果勾选，向cookie中储存登录信息，
      // 如果没有勾选，储存的信息为空
      if (this.checkbox_remember_me) {
        setCookie('account', this.phone)
        setCookie('password', this.password)
        setCookie('checkbox_remember_me', this.checkbox_remember_me)
      } else {
        setCookie('account', '')
        setCookie('password', '')
        setCookie('checkbox_remember_me', '')
      }
    },
    //忘记密码
    forgotPassword() {
      this.$router.push('/pages/ForgotPassword')
    },

    // 登录事件
    login() {
      this.$axios({
        method: 'post',
        url: `${base.baseUrlLz}/renren-admin/login`,
        data: {
          //这里是发送给后台的数据
          username: this.phone,
          password: this.password,
        },
      })
        .then((res) => {
          console.log(res, 'code')
          if (res.data.code === 0) {
            this.$message({
              message: '成功登录',
              type: 'success',
            })

            localStorage.setItem('token', res.data.data.token)
            localStorage.setItem('username', res.data.data.username)
            this.$router.push('/Home')
            this.setUserInfo()
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch()
    },
  },
  created() {
    // this.getloginPageConfig();
    // 在页面加载时从cookie获取登录信息
    let account = getCookie('account')
    let password = getCookie('password')
    let remenberMe = getCookie('checkbox_remember_me')
    // 如果存在赋值给表单，并且将记住密码勾选
    if (remenberMe) {
      this.phone = account
      this.password = password
      this.checkbox_remember_me = true
    }
  },
}
</script>

<style scoped>
.loginBody {
  /*background: url("../../assets/imgs/login.png") no-repeat;*/
  background-color: rgb(236, 236, 236);
  padding: 0;
  margin: 0;
  width: 100%;
  height: 930px;
}
.logincotent {
  /*background-color: red;*/
  width: 1250px;
  height: 520px;
  margin: 0 auto;
  position: relative;
  top: 10%;
  display: flex;
}
.login {
  background-color: #ffffff;
  width: 40%;
  height: 100%;
}
.loginPic {
  width: 60%;
  height: 100%;
  background: url('../../assets/imgs/login.png') no-repeat;
}
.loginC {
  width: 70%;
  height: 100%;
  margin: 0 auto;
  /*background-color: yellow;*/
}
.loginCTitel {
  padding-top: 60px;
}
.loginCTitelFormat {
  opacity: 1;
  font-size: 30px;
  font-family: SourceHanSansCN Heavy, SourceHanSansCN Heavy-Heavy;
  color: #31adda;
}
.loginCTitelFormat1 {
  opacity: 1;
  font-size: 24px;
  font-family: SourceHanSansCN Bold, SourceHanSansCN Bold-Bold;
  color: #31adda;
}
.passwordSet {
  margin-top: 15px;
}
.rememberPaw {
  float: left;
}
.forgetPaw {
  float: right;
  color: #409eff;
  font-size: 14px;
  cursor: pointer;
}
.loginCTitelFormat2 {
  display: flex;
  width: 100%;
  margin-top: 30px;
}
.loginCTitelFormat2C1 {
  width: 33.3%;
}
.loginCTitelFormat2C2 {
  width: 33.3%;
  opacity: 1;
  font-size: 18px;
  font-family: Adobe Heiti Std R, Adobe Heiti Std R-R;
  font-weight: bold;
  color: #666666;
}
.loginCTitelFormat2C3 {
  width: 33.3%;
}
.TitelFormat2C1Line {
  margin: 0 auto;
  margin-top: 10%;
  padding-top: 1px;
  width: 70%;
  /*height: 3px;*/
  background-color: #cccccc;
}
.loginInput {
  margin-top: 30px;
  width: 100%;
  height: 150px;
  padding-top: 30px;
  /*background-color: #666666;*/
}
.loginInputPhone {
  margin-bottom: 20px;
}
.loginButton {
  width: 100%;
}
</style>
